<template>
    <div>
      <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <van-collapse v-model="activeName" accordion style="margin-top: 40px;">
  <div v-for='(item, index) in list' :key="index">
  <van-cell :title="item.classname" @click="gotoClass(index)">
    <template #right-icon>
    <van-button type="danger" size="small" @click.stop="deleteMemberWarning(item.id)">删除</van-button>
  </template>
  </van-cell>
  </div>

  </van-collapse>
  
  </van-list>
    </div>
  </template>
  
  <script>
import axios from 'axios';
  export default {
    name: "MemberList_list",
    data() {
      return {
        activeName: ['1'],
        fin:0,
        list: [],
        loading: false,
        finished: false,
      };
    },
    mounted() {
      // console.log(this.$route.params.id);
      axios.post("/course/members?courseId="+this.$route.params.id).then(Response => {
        console.log(Response.data);
        this.list = Response.data.data;
      });
    },
    methods: {
      deleteMemberWarning(id){
        this.$dialog.confirm({
  title: '删除班级',
  message: '是否将该班级移出课程？',
})
        .then(() => {
          this.deleteMember(id);
        }).catch(() => {
          this.$message({
            // type: 'info',
            // message: '已取消删除'
          });
        });
      },
      deleteMember(id){
        console.log(id);
        axios.post("/course/RemoveCourseClass?CourseId="+this.$route.params.id+"&ClassId="+id).then(Response => {
          console.log(Response.data);
          this.$message({
            type:'success',
            message: '删除成功'
          });
          location.reload(); // 刷新页面
        });
      },
      gotoClass(a){
        this.$router.push('/ClassMemberList/' + this.list[a].classname+'/'+this.list[a].id);  
      },
      onLoad() {
    // 异步更新数据，setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
      this.loading = false;
      if(this.list.length === 0 || this.list.length === undefined){
        this.finished = true;
        return;
      }
      for (let i = 0; i < 100; i++) {
        this.fin += 1;
      }
  
      // 加载状态结束
      // this.loading = false;
  
      // 利用Vue的watch属性监视list数组的变化
  
        if (this.fin >= this.list.length) {
          this.finished = true;
          // 执行其他相关的代码
        }
    }, 1000);
  },
    },
  };
  </script>
  
  <style scoped>
  .blue-text {  
    color: skyblue;  
  }  
    
  .red-text {  
    color: rgb(116, 193, 0);  
  }
  </style>